<template>
    <div class="wrapper">
        <div class="tt">
            <van-tabs v-model:active="active" @change="renderedCli" color="#66d6ff">
                <van-tab :title="item.label" v-for="item in tabList" :key="item.value" />
            </van-tabs>
        </div>
        <div class="bb">
            <div class="content">
                <div class="aaa">
                    <div class="dateMon" @click="openPicker" v-show="active !== 2">
                        <span>{{ start }} ~ {{ end }}</span>
                        <img src="@/assets/chevron-down@2x.png" alt="" />
                    </div>
                    <div class="top" v-if="start && end">
                        <empty v-if="!list.length"></empty>
                        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getFindPageList">
                            <div class="item" v-for="(item,index) in list" :key="item.operator">
                                <div class="leftImg">
                                    <img v-if="index===0" class="number" src="@/assets/numberOne.png" alt="" />
                                    <img v-if="index===1" class="number" src="@/assets/numberTwo.png" alt="" />
                                    <img v-if="index===2" class="number" src="@/assets/numberThree.png" alt="" />
                                    <img v-if="index > 2"  style="visibility: hidden" class="number" src="@/assets/numberThree.png" alt="" />
                                    <img src="@/assets/index/person.png" alt="" />
                                </div>
                                <div class="rightInfo">
                                    <div class="l">
                                        <div v-if="active === 0 || active === 1">{{ item.operatorName }}</div>
                                        <div v-if="active === 2 || active === 3 || active === 4">{{ item.AGENT_NAME }}</div>
                                        <div style="font-size: 12px; color: #9a9a9a" v-if="active === 0 || active === 1">
                                            {{ space(item.phone) }}
                                        </div>
                                        <div style="font-size: 12px; color: #9a9a9a"
                                             v-if="active === 2 || active === 3 || active === 4">
                                            {{ space(item.PHONE_NO) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="r" v-if="active === 0">{{ item.dimensi }} 元</div>
                                <div class="r" v-if="active === 1">{{ item.dimensi }} 笔</div>
                                <div class="r" v-if="active === 2 || active === 3 || active === 4">{{ item.COUNT }} 台</div>
                            </div>
                        </van-list>
                    </div>
                </div>
            </div>
            <van-calendar allow-same-day v-model:show="show" :min-date="minDate" :max-date="maxDate" type="range" @confirm="onConfirm" />
            <!--            <van-popup v-model:show="show" position="bottom">-->
            <!--                <van-picker-group-->
            <!--                    title="预约日期"-->
            <!--                    :tabs="['开始日期', '结束日期']"-->
            <!--                    @confirm="onConfirm"-->
            <!--                    @cancel="onCancel"-->
            <!--                >-->
            <!--                    <van-date-picker v-model="startDate" :max-date="new Date()" />-->
            <!--                    <van-date-picker v-model="endDate" :min-date="new Date(startDate)" />-->
            <!--                </van-picker-group>-->
            <!--            </van-popup>-->
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { amountTop, getQueryTimeRecently, numTop, posActivateTop, posBindTop, posTop100 } from "@/api/ranking"
import { parseTime } from "@/utils/utils.ts"
import {showToast} from 'vant'

export default defineComponent({
    name: "rankingList",
    setup() {
        const state = reactive({
            active: 0,
            activeTab: 0,
            show: false,
            start: "",
            end: "",
            monList: [],
            loading: false,
            finished: false,
            currentPage: 1,
            list: [],
            minDate: new Date(2023, 0, 1),
            maxDate: new Date(2030, 0, 31),
            viewDate: "",
            startDate: [parseTime(new Date(), "{y}"), parseTime(new Date(), "{m}"), "01"],
            endDate: [parseTime(new Date(), "{y}"), parseTime(new Date(), "{m}"), parseTime(new Date(), "{d}")],
            dateList: [],
            tabList: [
                { label: "交易量", value: 0 },
                { label: "交易笔数", value: 1 },
                { label: "终端总数", value: 2 },
                { label: "终端绑定", value: 3 },
                { label: "终端唤醒", value: 4 }
            ]
        })
        const space = name => {
            return name ? name.substr(0, 3) + "****" + name.substr(7) : name
        }

        const onCancel = () => {
            state.show = false
        }

        const getQueryTimeRecentlyCli = () => {
            getQueryTimeRecently({}).then(res => {
                let dateList = res.object.map(item => {
                    for (const key in item) {
                        return { text: key, children: item[key] }
                    }
                })
                state.start = parseTime(new Date(), "{y}-{m}") + "-" + "01"
                state.end = parseTime(new Date(), "{y}-{m}-{d}")
                state.minDate = new Date(dateList[dateList.length - 1].text + "-" + dateList[dateList.length - 1].children[0])
                state.maxDate = new Date(
                    new Date(dateList[0].text + "-" + dateList[0].children[dateList[0].children.length - 1]).getTime() + 86400000
                )
            })
        }
        getQueryTimeRecentlyCli()
        const onConfirm = values => {
            console.log(parseTime(values[0],'{y}-{m}-{d}'))
            state.list = []
            // const [start, end] = values
            state.start =  parseTime(values[0],'{y}-{m}-{d}')

            state.end = parseTime(values[1],'{y}-{m}-{d}')

            state.currentPage = 1
            state.finished = true
            if (state.active === 0) getAmountTop()
            if (state.active === 1) getNumTop()
            if (state.active === 2) getPosTop100()
            if (state.active === 3) getPosBindTop()
            if (state.active === 4) getPosActivateTop()
            state.show = false
        }
        const getFindPageList = ()=>{
            // state.start = state.startDate.join('-')
            // state.end = state.endDate.join('-')
            if (state.active === 0) getAmountTop()
            if (state.active === 1) getNumTop()
            if (state.active === 2) getPosTop100()
            if (state.active === 3) getPosBindTop()
            if (state.active === 4) getPosActivateTop()
            state.show = false
        }
        const getNumTop = () => {
            numTop({
                currentPage: state.currentPage,
                startTime: state.start,
                endTime: state.end
            }).then(res => {

                if (res.object.topList.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }

                state.list = state.list.concat(res.object.topList)
            })
        }
        const getPosTop100 = () => {
            posTop100({
                currentPage: state.currentPage,

            }).then(res => {

                if (res.object.list.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }

                state.list = state.list.concat(res.object.list)
            })
        }
        const getPosBindTop = () => {
            posBindTop({
                currentPage: state.currentPage,

                startTime: state.start,
                endTime: state.end
            }).then(res => {

                if (res.object.list.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }

                state.list = state.list.concat(res.object.list)
            })
        }
        const getPosActivateTop = () => {
            posActivateTop({
                currentPage: state.currentPage,
                startTime: state.start,
                endTime: state.end
            }).then(res => {
                if (res.object.list.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }
                state.list = state.list.concat(res.object.list)
            })
        }
        const renderedCli = e => {
            state.list = []
            state.currentPage = 1
            state.finished = true

            if (e === 0) getAmountTop()
            if (e === 1) getNumTop()
            if (e === 2) getPosTop100()
            if (e === 3) getPosBindTop()
            if (e === 4) getPosActivateTop()
        }
        // 交易量排行查询
        const getAmountTop = () => {
            amountTop({
                currentPage: state.currentPage,
                startTime: state.start,
                endTime: state.end
            }).then(res => {
                if (res.object.topList.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }

                state.list = state.list.concat(res.object.topList)

            })
        }
        const openPicker = () => {
            state.show = true
        }
        return {
            ...toRefs(state),
            openPicker,
            space,
            renderedCli,
            onCancel,
            getFindPageList,
            onConfirm
        }
    }
})
</script>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .bb {
        flex: 1;
        overflow: scroll;

        .content {
            padding: 10px;

            .aaa {
                border-radius: 5px;
                position: relative;
            }

            .dateMon {
                position: sticky;
                top: 0;
                font-weight: 400;
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
                text-align: center;
                background-color: #ffffff;
                font-size: 0;
                font-family: Microsoft YaHei;
                color: #545454;
                img {
                    width: 20px;
                }
                span{
                    font-size: 14px;
                }
                border-bottom: 1px solid #f5f5f5;
            }

            .item {
                padding: 10px;
                box-sizing: border-box;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;

                .leftImg {
                    font-size: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        width: 40px;
                    }
                    .number{
                        margin-right: 5px;
                        height: 20px;
                        width: 20px;
                    }
                }

                .rightInfo {
                    flex: 1;
                    padding: 0 10px;
                    line-height: 25px;
                }
            }

            .item:last-child {
                border: none;
            }
        }

        .btn {
            width: 159px;
            height: 40px;
            background: #66d6ff;
            opacity: 1;
            border-radius: 6px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            color: #ffffff;
            margin: 20px auto;
        }
    }
}
</style>
